extends layout

block extraHeader
    link(rel='stylesheet', href='/vendor/clusterize/clusterize.css')
    style(type='text/css').
        #visualMap{height:500px;width:100%;}

block content
    #filterField
        form#condition.form-inline
            .row
                .form-group.col-sm-2
                    label(for="biz_type") 城市
                    select#city.form-control(name="city")
                        option 上海
                        option 杭州
                        option 深圳
                        option 广州
                        option 北京
                        option 武汉
                        option 长沙
                        option 成都
                //- .form-group.col-sm-2
                //-     label(for="biz_type") 订单类型
                //-     select#biz_type.form-control(name="biz_type")
                //-         option(value="PERSONAL") 个人
                //-         option(value="COMPANY") 企业
                //-         option(value="STATION") 驿站
                .form-group.col-sm-4
                    label(for="from") 订单月度
                    select#from.form-control(name="from" placeholder="开始") 
                        option 4
                        option 5
                        option 6
                        option 7
                        option(selected) 8
                        option 9
                    label -
                    select.form-control(name="to" placeholder="结束") 
                        option 4
                        option 5
                        option 6
                        option 7
                        option(selected) 8
                        option 9
                .form-group.col-sm-4
                    a#query.btn.btn-primary.pull-right 查询

                
    #content
        table#content_table.table.table-hover.table-bordered.table-condensed
            thead#header(style="background-color: #83CB1E;")
                th  地标
                th.col-sm-2  LATITUDE
                th.col-sm-2  LONGITUDE
                th.col-sm-2  日期
                th.col-sm-1 
                    a.btn.btn-warning.pull-right(type="button" data-toggle="modal" data-target="#mapModal") 
                        span.glyphicon.glyphicon-map-marker 地图
                        span.badge 0
            tbody#contentArea.clusterize-content.table-striped
                tr.clusterize-no-data 
                    td 
    
    #hiddenField
    #mapModal.modal.fade(tabindex=-1 role="dialog" aria-labelledby="myModalLabel")
        .modal-dialog.modal-lg(role="document")
            .modal-content
                .modal-header
                    button.close(data-dismiss="modal" aria-label="Close")
                        span(aria-hidden="true") &times;
                    h5#myModalLabel.modal-title 百度地图
                    a.heat.btn.btn-xs.btn-danger.pull-right
                        span.glyphicon.glyphicon-camera 热力图
                        
                    p
                .modal-body
                    #visualMap
                .modal-footer
                    //- button.btn.btn-default(data-dismiss="modal") Close
                    
    // /WRAPPER  

append scripts
    script(src='/vendor/file-saver.js/FileSaver.js')
    script(src='/vendor/handlebars/handlebars.js')
    script(src='/vendor/StickyTableHeaders/js/jquery.stickytableheaders.js')
    script(src='http://api.map.baidu.com/api?v=2.0&ak=crCAAvrbGvG67BO403zq6SaG')
    script(src='http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js')
    script(type='text/javascript').
        var map,dataSet;
        var content = $('#contentArea');
        var tmpl = Handlebars.compile('<tr><td id="{{LAND_MARK}}">{{LAND_MARK}}</td><td>{{LONGITUDE}}</td>'+
        '<td>{{LATITUDE}}</td><td>{{date}}</td></tr>');

        $(document).ready(function() {
            $('.heat').click(showHeatMap);
            $('.points').click(showPoints);
            map = new BMap.Map("visualMap");          // 创建地图实例  
            var point = new BMap.Point(121.487473, 31.231744);  // 创建点坐标  
            map.centerAndZoom(point, 14);                 // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom();
            map.addControl(new BMap.NavigationControl());

            $('#query').click(function(){
                content.empty();
                var con = $(this).parents('form').serialize()
                $.getJSON( '/orders/personal/?'+con, function(data) {
                    dataSet = data;
                    $('.badge').html(data.length)
                    var tableData =  $(dataSet).map(function(i,val){content.append(tmpl(val));}); 
                });
            })
        });

        $('#content_table').stickyTableHeaders({fixedOffset: $(".container")});

        
        $('ul.nav.navbar-nav.navbar-right  a#save').click(function(){
            var d =  $(dataSet).map(function(i,val){
                                return val.CITY+','
                                    +val.LAND_MARK+','
                                    +val.LONGITUDE+','
                                    +val.LATITUDE+','
                                    +val.date+',';
                                });
            var blob = new Blob([$.makeArray(d).join('\n')], {type: "text/csv;charset=utf-8"});
            saveAs(blob, "gps_order.csv");
        });


        $('#mapModal').on('shown.bs.modal', function (e) {
          showPoints();
        })

        var pointCollection;
        function showPoints(){
            map.removeOverlay(pointCollection);
            map.removeOverlay(heatmapOverlay);

            var points = [];
            for (var i = 0; i < dataSet.length; i++) {
              points.push(new BMap.Point(dataSet[i].LONGITUDE, dataSet[i].LATITUDE));
            }
            //- map.panTo(points[Math.round(Math.random()*points.length)]);
            map.centerAndZoom(points[Math.round(Math.random()*points.length)], 12);
            var options = {
                size: 2,
                shape: 4,
                color: '#d340c3'
            }
            pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            pointCollection.addEventListener('click', function (e) {
              alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
            });
            map.addOverlay(pointCollection);  // 添加Overlay
        }

        var heatmapOverlay;
        function showHeatMap(){
            pointCollection && pointCollection.hide();
            if(dataSet){
                heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
                map.addOverlay(heatmapOverlay);
                var hpoints = []
                for (var i = 0; i < dataSet.length; i++) {
                  hpoints.push({"lng":dataSet[i].LONGITUDE,"lat":dataSet[i].LATITUDE,"count":1});
                }
                heatmapOverlay.setDataSet({data:hpoints,max:100});
                heatmapOverlay.show();
            }
        }